<template>
  <el-dialog :title="addressForm.id ? '修改地址' : '新增地址'" :visible="showDialog" @close="close">
    <!-- 地址表单 -->
    <el-form ref="addressForm" label-width="120px" :rules="rules" :model="addressForm">
      <el-form-item label="收货人" prop="receiver">
        <el-input v-model="addressForm.receiver" placeholder="请输入，限制20字符以内" />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="addressForm.mobile" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item label="区域">
        <el-select ref="province" v-model="addressForm.province" @change="changeProvince">
          <el-option
            v-for="item in provinceList"
            :key="item"
            :value="item"
            :label="item"
          />
        </el-select>
        <el-select ref="city" v-model="addressForm.city" style="margin: 0 20px" @change="changeCity">
          <el-option
            v-for="item in cityList"
            :key="item"
            :value="item"
            :label="item"
          />
        </el-select>
        <el-select ref="area" v-model="addressForm.area" @change="changeArea">
          <el-option
            v-for="item in areaList"
            :key="item"
            :value="item"
            :label="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="详细地址" prop="location">
        <el-input v-model="addressForm.location" placeholder="请输入详细地址" />
      </el-form-item>
      <el-form-item>
        <el-row type="flex" justify="end">
          <el-button type="primary" @click="confirmClick">确定</el-button>
          <el-button @click="close">取消</el-button>
        </el-row>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { getAreaList, getCityList, getProvinceList, addAddress, getAddressDetail, updateAddress } from '@/api/address'
export default {
  name: 'AddressDialog',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 省份数据
      provinceList: [],
      // 城市数据
      cityList: [],
      // 区县数据
      areaList: [],
      // 地址表单对象
      addressForm: {
        receiver: '',
        mobile: '',
        province: '',
        city: '',
        area: '',
        location: '',
        state: 0
      },
      rules: {
        // 校验规则
        receiver: [
          { required: true, message: '请输入收货人', triggle: 'blur' },
          { min: 1, max: 20, message: '收货人限制20字符以内', trigger: 'blur' }
        ],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误', trigger: 'blur' }
        ],
        location: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getProvinceList()
  },
  methods: {
    // 关闭弹层
    close() {
      this.$emit('close')
      // 重置表单
      this.$refs.addressForm.resetFields()
      this.addressForm = {}
    },
    // 切换区县
    changeArea(area) {
      this.addressForm.area = area
    },
    // 切换城市
    changeCity(city) {
      this.addressForm.city = city
      // 重置区县数据
      this.addressForm.area = ''
      // 获取区县
      this.getAreaList(this.addressForm.province, city)
    },
    // 切换省份
    changeProvince(province) {
      console.log(province)
      this.addressForm.province = province
      // 重置城市和区县数据
      this.addressForm.city = ''
      this.addressForm.area = ''
      // 获取城市
      this.getCityList(province)
    },
    // 获取区县数据
    async getAreaList(pname, cname) {
      // 调用区县数据接口
      const res = await getAreaList(pname, cname)
      this.areaList = res.data.list
    },
    // 获取城市数据
    async getCityList(pname) {
      // 调用城市数据接口
      const res = await getCityList(pname)
      this.cityList = res.data.list
    },
    // 获取省份数据
    async getProvinceList() {
      // 调用省份数据接口
      const res = await getProvinceList()
      this.provinceList = res.data.list
    },
    // 提交数据
    confirmClick() {
      this.$refs.addressForm.validate(async valid => {
        if (!valid) return false
        if (this.addressForm.id) {
          await updateAddress(this.addressForm)
        } else {
          await addAddress(this.addressForm)
        }
        this.$message.success(this.addressForm.id ? '修改地址成功' : '新增地址成功')
        this.close()
        this.$emit('update')
      })
    },
    // 回显数据
    async getDetail(id) {
      const res = await getAddressDetail(id)
      this.addressForm = res.data
    }

  }
}
</script>

<style>

</style>
